<template>
  <div id="invoicepdf" class="dashboard-container">
    <h2 class="head-big-title">Perincian Pesanan Pembelian {{detailData.oid}}</h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div id="purchaseorder" ref="print" style="clear: both;">
      <el-card shadow="always" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;" :body-style="{ padding: '15px 0 25px 20px' }">
        <h2 style="line-height: 36px;">{{detailData.dealerBrief.dealerName}}</h2>
        <div style="width: 55%;float: left;">
          <p style="margin-top: 12px;word-break:normal;">
            <svg-icon icon-class="ico_address"></svg-icon>
            {{detailData.dealerBrief.shopAddr.streetAddress + ', ' +detailData.dealerBrief.shopAddr.regionalAddress + ', ' + detailData.dealerBrief.shopAddr.postCode + ', ' + detailData.dealerBrief.shopAddr.city + ', ' + detailData.dealerBrief.shopAddr.region}}</p>
          <p style="margin-top: 12px;">
            <svg-icon icon-class="ico_mail"></svg-icon>
            {{detailData.dealerBrief.emailAddress}}</p>
          <p style="margin-top: 12px;">
            <svg-icon icon-class="ico_phone"></svg-icon>
            {{detailData.dealerBrief.shopAddr.phoneNumber}}</p>
        </div>
        <div style="width: 40%;float: left;">
          <el-image
            style="width: 70px;height: 70px;margin-left: 30px;"
            :src="picbase + detailData.dealerBrief.logoUrl"></el-image>
        </div>
      </el-card>
      <div class="card-div">
        <el-card shadow="always" class="" :body-style="{ padding: '15px 0 10px 20px' }" style="margin-top: 15px;">
          <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Nombor Pesanan</label><span style="float: left;">: </span>{{ detailData.oid }}</p>
          <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Tarikh</label><span style="float: left;">: </span>{{ $getTime(detailData.createdAt) }}</p>
        </el-card>
        <el-card shadow="always" :body-style="{ padding: '5px 0 0 20px' }" style="margin-top: 20px;">
          <el-form label-position="top" style="float: left;text-align: left;margin: 0;width: 100%;">
            <el-form-item label="Status" class="one-form-item">
              <el-select class="input-width" v-model="detailData.state" @input="changeNew($event)" placeholder="Status">
                <el-option v-for="(item, index) in $orderStateList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Tarikh Penghantaran: " class="one-form-item">
              <el-date-picker
                v-model="detailData.updateAt"
                class="input-width"
                type="datetime"
                placeholder="Pilih masa">
              </el-date-picker>
            </el-form-item>
            <el-button
              style="float: right;position: relative;bottom: 10px;margin-right: 4%;"
              round
              type="warning"
              class="no-print"
              :loading="updateButtonLoading"
              :disabled="updateButtonLoading"
              @click="handleUpdate()">Kemas Kini</el-button>
          </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 15px;text-align: right;line-height: 32px;" :body-style="{ padding: '15px 4% 25px 20px' }">
          <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Kecil</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.puductFee) }}</p>
          <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Penghantaran</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.deliveryFee) }}</p><br>
          <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Penyesuaian</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.adaptFee) }}</p>
          <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Pesanan</label><span style="float: left;">: </span>{{ $formatMoneyStr(detailData.subFee) }}</p>
        </el-card>
        <el-card shadow="always" style="text-align: left;margin-top: 15px;" :body-style="{ padding: '15px 0 25px 20px' }">
          <h2 style="line-height: 36px;">Alamat Bil</h2>
          <p>
            <svg-icon icon-class="ico_user"></svg-icon>
            {{detailData.billesAddres.name}}</p>
          <p style="margin-top: 12px;word-break:normal;">
            <svg-icon icon-class="ico_address"></svg-icon>
            {{ detailData.billesAddres.streetAddress + ', ' +detailData.billesAddres.regionalAddress + ', ' + detailData.billesAddres.postCode + ', ' + detailData.billesAddres.city + ', ' + detailData.billesAddres.region }}</p>
          <p style="margin-top: 12px;">
            <svg-icon icon-class="ico_phone"></svg-icon>
            {{detailData.billesAddres.phoneNumber}}</p>
        </el-card>
        <el-card shadow="always" style="text-align: left;margin-top: 15px;" :body-style="{ padding: '15px 0 25px 20px' }">
          <h2 style="line-height: 36px;">Alamat Penghantaran</h2>
          <p>
            <svg-icon icon-class="ico_user"></svg-icon>
            {{detailData.shopAddres.name}}</p>
          <p style="margin-top: 12px;word-break:normal;">
            <svg-icon icon-class="ico_address"></svg-icon>
            {{ detailData.shopAddres.streetAddress + ', ' +detailData.shopAddres.regionalAddress + ', ' + detailData.shopAddres.postCode + ', ' + detailData.shopAddres.city + ', ' + detailData.shopAddres.region }}</p>
          <p style="margin-top: 12px;">
            <svg-icon icon-class="ico_phone"></svg-icon>
            {{detailData.shopAddres.phoneNumber}}</p>
          <p style="margin-top: 12px;">
            <svg-icon icon-class="ico_delivery_note"></svg-icon>
            {{detailData.sysOrderMsg.buyerMsg?detailData.sysOrderMsg.buyerMsg:'Nota Penghantaran Sini'}}</p>
        </el-card>
        <div style="width: 100%;margin: 0;border-radius: 20px;background-color: rgb(245,246,247);text-align: left;margin-top: 15px;">
          <div v-for="(item,index) in detailData.detail" :key="index" style="width: 100%;border-radius: 10px;background-color: white;margin-bottom: 10px;">
            <div style="width: 100%;">
              <div style="width: 60px;height: 52px;display: inline-block;">
                <el-image
                  style="width: 52px; height: 52px;"
                  :src="picbase + item.picUrl"></el-image>
              </div>
              <div style="display: inline-block;height: 52px;vertical-align: top;margin-top: 6px;">
                <strong>Product Name</strong>
                <p>{{item.productName}}</p>
              </div>
            </div>
            <div style="width: 100%;margin-left: 15px;">
              <div style="width: 40%;display: inline-block;">
                <strong>Quantity</strong>
                <p>{{item.quantity}}</p>
              </div>
              <div style="width: 58%;display: inline-block;">
                <strong>Unit Price</strong>
                <p>{{$formatMoneyStr(item.price) + '(1 '}}{{item.buyunit + ')'}}</p>
              </div>
            </div>
            <el-divider></el-divider>
            <div style="width: 100%;margin-left: 15px;">
              <strong style="display: inline-block;width: 40%;">Jumlah</strong>
              <p style="display: inline-block;">{{$formatMoneyStr(item.allmoney)}}</p>
            </div>
          </div>
        </div>
        <el-table
          :data="detailData.stateChangeRecode"
          style="border-radius: 20px;margin-top: 15px;margin-bottom: 15px;">
          <el-table-column label="Tarikh Ditambah">
            <template slot-scope="scope">
              <p>{{$getTime(scope.row.stateChageAt)}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="stateDescrip" label="Status"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { order_editApi, queryinfoOrderApi } from '@/api/user'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'name',
      'role'
    ])
  },
  data() {
    return {
      msg: 'Selamat Datang',
      updateButtonLoading: false,
      detailData: {
        sysOrderMsg: {},
        detail: [],
        stateChangeRecode: []
      }
    }
  },
  mounted() {
    this.checkID()
  },
  methods: {
    changeNew() {
      this.$forceUpdate()
    },
    checkID() {
      const oid = this.$route.params.id
      if (!(oid.length && oid.length > 3)) {
        this.$router.push({ path: '/Orders/Query' })
      }
      queryinfoOrderApi({
        oid: oid
      }).then(res => {
        this.detailData = res.data
        if (this.detailData.billesAddres == null) {
          this.detailData.billesAddres = {}
        }
        if (this.detailData.shopAddres == null) {
          this.detailData.shopAddres = {}
        }
        if (this.detailData.sysOrderMsg == null) {
          this.detailData.sysOrderMsg = {}
        }
        if (this.detailData.dealerBrief == null) {
          this.detailData.dealerBrief = {}
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleUpdate() {
      this.updateButtonLoading = true
      order_editApi({
        state: this.detailData.state,
        oid: this.detailData.oid
      }).then(res => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
        this.updateButtonLoading = false
        if(this.detailData.state == -1) {
          this.$router.push({ path: '/Orders/Query' })
        } else {
          this.$router.replace({ path: '/redirect' + this.$route.fullPath })
        }
      }).catch(err => {
        this.updateButtonLoading = false
        this.$router.replace({ path: '/redirect' + this.$route.fullPath })
        console.log(err)
      })
    },
    setOrderState() {
      order_editApi({
        state: 5,
        oid: this.detailData.oid
      }).then(res => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
      })
      this.$router.replace({ path: '/redirect' + this.$route.fullPath })
    }
  }
}

</script>

<style lang="scss" scoped>
  .dashboard {
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .one-form-item{
    display: block;
    width: 95%;
    .el-select{
      width: 100%;
    }
    .el-input{
      width: 100%;
    }
  }
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

  .two-card-not + .two-card-not{
    margin-left: 2%;
  }
  .two-card-a{
    width: 65%;
  }
  .two-card-b{
    width: 33%;
  }
  .two-card-not{
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .two-card + .two-card{
    margin-left: 2%;
  }

  .two-card{
    width: 49%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .one-card{
    width: 100%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 19px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .last-days-order{
    width: 92%;
    margin: 0 4%;
    border-radius: 20px;
  }
  .last-days-order .erchart-div{
    height:278px;display: inline-block;background-color: white;border-radius: 10px;
  }
  .header-div{
    float: right;
    text-align: center;
    margin-right: 64px;
    position: relative;
    bottom: 21px;
  }
  .header-div p{
    margin: 10px 0;
  }
  .header-div img{
    width: 64px;
    height: 64px;
  }
  .head-info-three{
    width: 28%;
    margin-right: 20px;
    margin-bottom: 15px;
    display: inline;
    float: left;
  }
  .card-div{
    width: 94%;text-align: left;margin: 0 3%
  }
  .margin-tops{
    margin-top: 5px;
  }
  .card-div .middle-info{
    width: 32%;
    display: inline-block;
    margin: 8px 0;
  }
  .total-sum-div{
    padding: 20px;
    text-align: left;
    width: 420px;float: right;margin-right: 4%;
  }
  .total-sum-div .middle-info{
    margin-left: 60px;
  }
  .total-sum-div .middle-info label{
    width: 100px;
    display: inline-block;
  }
  .card-div .two-info{
    width: 49%;
    display: inline-block;
    margin: 8px 0;
    i{
      width: 21px;
    }
  }
  .card-div .one-info{
    display: block;
    margin: 8px 0;
    label{
      display: inline-block;
      width: 122px;
    }
  }
</style>
<style scoped>
  /deep/.el-divider{
    margin: 8px 0 10px 0;
  }
</style>
